<script setup>
	import { ref, onUpdated } from 'vue'
	import { useUsercodeStore } from '@/store/usercode.js'
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import { http } from '@/utils/http.js'
	import square from './component/square.vue'
	import send from './component/send.vue'
	import deal from './component/deal.vue'
	import treasure from './component/treasure.vue'

	const userCodeStore = useUsercodeStore()

	const active = ref(1)
	function changeTab(index) {
		active.value = index
	}

	function back() {
		uni.switchTab({
			url: '/pages/home/index',
		})
	}

	const banpopup = ref()
	const tippopup = ref()
	const banTime = ref()
	async function getUserInfo() {
		const res = await http.request({
			url: '/api/user/userMsg',
			method: 'POST',
			data: {},
		})
		console.log('user')
		console.log(res.data.data)
		if (res.data.data.bidding_status == 1) {
			const currentTimestamp = Math.floor(Date.now() / 1000)
			banTime.value = res.data.data.bidding_pass_time - currentTimestamp
			banpopup.value.open('center')
		} else {
			console.log(userCodeStore.usercode.prompt)
			if (userCodeStore.usercode.prompt == 0) {
				tippopup.value.open('center')
			}
		}
	}

	//待付款
	const wait = ref(false)
	async function getDealList() {
		const res = await http.request({
			url: '/api/bidding/myParticipate',
			method: 'POST',
			data: {
				page: 1,
				limit: 10,
				keywords: '',
				status: -1,
			},
		})
		console.log(res)
		if (res.data.length) {
			wait.value = true
		} else {
			wait.value = false
		}
		console.log(wait.value)
	}

	function sure() {
		if (check.value) {
			userCodeStore.setPrompt(1)
		}
		banpopup.value.close('center')
		tippopup.value.close('center')
	}
	const check = ref(false)
	function ifAgree() {
		check.value = !check.value
	}

	onLoad((option) => {
		console.log(option)
		if (option.index) {
			active.value = option.index
		}
		getUserInfo()
	})

	onShow((option) => {
		getDealList()
	})
</script>

<template>
	<view class="transition-content">
		<!-- <view class="nav-bar">
			<uni-nav-bar left-icon="left" title="交易频道" @clickLeft="back" />
		</view> -->
		<view class="choose-tab">
			<view
				class="tab-item"
				:class="{ 'tab-item-active': active == 1 }"
				@click="changeTab(1)"
			>
				交易广场
			</view>
			<view
				class="tab-item"
				:class="{ 'tab-item-active': active == 2 }"
				@click="changeTab(2)"
			>
				我的发布
			</view>
			<view
				class="tab-item"
				style="position: relative"
				:class="{ 'tab-item-active': active == 3 }"
				@click="changeTab(3)"
			>
				我的交易
				<view
					class=""
					v-if="wait"
					style="
						position: absolute;
						top: -6rpx;
						right: -4rpx;
						width: 12rpx;
						height: 12rpx;
						background-color: red;
						border-radius: 50%;
					"
				>
				</view>
			</view>
			<view
				class="tab-item"
				:class="{ 'tab-item-active': active == 4 }"
				@click="changeTab(4)"
			>
				我的货款
			</view>
		</view>
		<view class="" v-if="userCodeStore.usercode.isTrans == 1">
			<view class="choose-content" v-if="active == 1">
				<square></square>
			</view>
			<view class="choose-content" v-if="active == 2">
				<send></send>
			</view>
			<view class="choose-content" v-if="active == 3">
				<deal @doit="getDealList"></deal>
			</view>
			<view
				class="choose-content"
				style="height: 100%"
				v-if="active == 4"
			>
				<treasure></treasure>
			</view>
		</view>

		<!-- 封禁弹出层 -->
		<uni-popup ref="banpopup" type="center">
			<view class="banpopup-content">
				<image
					style="width: 288rpx; height: 288rpx"
					src="https://ojqn.wm2177.com/wechat_imgs/transition/warning.png"
					mode=""
				></image>
				<view class="banpopup-word">
					由于您在上一次的交易中未按时付款完成交易，违背了平台商城交易的用户守则，被列入了违规名单，您已被限制参与商城交易及发布
				</view>
				<view class="less-time"> 剩余时间 </view>
				<uni-countdown
					:font-size="15"
					color="#EA0000"
					:day="Math.floor(banTime / (24 * 60 * 60))"
					:hour="Math.floor((banTime % (60 * 60 * 24)) / (60 * 60))"
					:minute="Math.floor((banTime % (60 * 60)) / 60)"
					:second="Math.floor(banTime % 60)"
					:show-colon="false"
				></uni-countdown>
				<view class="ban-button" @click="sure"> 确认 </view>
			</view>
		</uni-popup>
		<!-- 提示弹出层 -->
		<uni-popup ref="tippopup" type="center">
			<view class="tippopup-content">
				<image
					style="width: 272rpx; height: 272rpx"
					src="https://ojqn.wm2177.com/wechat_imgs/transition/notice.gif"
					mode=""
				></image>
				<view class="tippopup-word">
					为了保证平台商城交易的合规以及保障各位用户的权益，买家需在规定的有效期内完成支付，逾期未支付的订单自动取消，商品将流拍
					<text style="color: #ea0000"
						>且对买家进行封禁处理包括但不限于参与和发布商城交易</text
					>
				</view>
				<view class="tip-button" @click="sure"> 确认 </view>
				<view class="checked">
					<checkbox
						style="transform: scale(0.8)"
						value="cb"
						@click="ifAgree"
						:checked="check"
						activeBackgroundColor="#FFE60F"
					/>
					<view>我已知晓，本次登录期间不再提示</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<style lang="scss" scoped>
	.transition-content {
		height: 100vh;
		background-color: #f5f5f5;

		.nav-bar {
			padding-top: 86rpx;
			background-color: #fff;
			::v-deep .uni-navbar__header {
				background-color: transparent !important;
			}
			::v-deep .uni-navbar__content {
				background-color: transparent !important;
			}
			::v-deep .uni-navbar--border {
				border: none !important;
			}
		}
		.choose-tab {
			height: 32rpx;
			padding: 30rpx 20rpx 42rpx 20rpx;
			display: flex;
			align-items: center;
			background-color: #fff;
			.tab-item {
				margin-right: 40rpx;
				font-size: 26rpx;
				line-height: 32rpx;
				font-weight: 700;
				&:last-child {
					margin-right: 0;
				}
			}
			.tab-item-active {
				font-size: 40rpx;
				font-weight: 700;
				&::after {
					content: '';
					display: block;
					width: 100%;
					height: 14rpx;
					background-color: $transaction-color;
				}
			}
		}
		.banpopup-content {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 586rpx;
			height: 672rpx;
			padding: 0 32rpx;
			box-sizing: border-box;
			border-radius: 44rpx;
			background-color: #fff;
			.banpopup-word {
				margin-bottom: 30rpx;
				font-size: 26rpx;
			}
			.less-time {
				margin-bottom: 10rpx;
				font-size: 28rpx;
				color: #9b9b9d;
			}
			.ban-button {
				width: 410rpx;
				height: 92rpx;
				border-radius: 46rpx;
				margin-top: 28rpx;
				box-sizing: border-box;
				background-color: $transaction-color;
				font-size: 32rpx;
				text-align: center;
				line-height: 92rpx;
			}
		}
		.tippopup-content {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 586rpx;
			height: 720rpx;
			padding: 32rpx;
			box-sizing: border-box;
			border-radius: 44rpx;
			background-color: #fff;
			.tippopup-word {
				margin-top: 24rpx;
				font-size: 26rpx;
			}

			.tip-button {
				width: 410rpx;
				height: 92rpx;
				border-radius: 46rpx;
				margin-top: 40rpx;
				box-sizing: border-box;
				background-color: $transaction-color;
				font-size: 32rpx;
				text-align: center;
				line-height: 92rpx;
			}
			.checked {
				display: flex;
				align-items: center;
				margin-top: 14rpx;
				::v-deep uni-checkbox .uni-checkbox-input {
					border-radius: 50% !important;
				}
				view {
					font-size: 24rpx;
					color: #898989;
				}
				::v-deep checkbox .wx-checkbox-input {
					border-radius: 50% !important;
					color: #ffffff !important;
				}

				::v-deep checkbox .wx-checkbox-input.wx-checkbox-input-checked {
					color: #fff;
					background: $transaction-color;
				}

				::v-deep .wx-checkbox-input.wx-checkbox-input-checked {
					border-color: $transaction-color !important;
				}
			}
		}
	}
	::v-deep .uni-countdown__splitor {
		color: #ea0000 !important;
	}
</style>